<!DOCTYPE>
<html>	
<head>
<title>HTML5水波浪起伏模拟动画DEMO演示</title>
<META charset="utf-8">
<style>
html{
  overflow:hidden;
}
body{
   margin:0px;
}
canvas{
   margin-left:-40px;
}
span{
	 height:7px;
   width:20px;
	 display:inline-block;
	 cursor:pointer;  
	 position:absolute;
	 top:0px;
			 transition: height 0.2s;
		  -o-transition: height 0.2s;	
		-moz-transition: height 0.2s;	
	 -webkit-transition: height 0.2s;	

}
span:hover{
	 height:12px;
}
#blue{
  background-color:#367aec;
  left:30px;
}
#purple{
  background-color:#f727d2;
  left:50px;
}
#black{
  background-color:#000000;
  left:70px;
}
#container{
  width:100%;
  
}      
</style>
</head>
<body>

<div id='container'>
	<canvas id="canvas">
		啊哦，你的浏览器不支持canvas. Sorry~
	</canvas>
	<span  id="blue" onClick="blue()"></span>
	<span id="purple" onClick="purple()"></span>
	<span id="black" onClick="black()"></span>
</div>
<script src="index.js"></script>

</body>
</html>